<template>
	<view class="novel-container" :class="'theme-' + currentTheme">
		<!-- 阅读器头部 -->
		<!-- 	<view class="reader-header">
			<view class="header-left"> -->
		<!-- 	<view class="back-btn" @click="goBack">
					<text class="back-icon">‹</text>
					<text class="back-text">返回</text>
				</view> -->
		<!-- 	</view>
			<view class="header-center">
				<text class="novel-title">{{ novelInfo.title }}</text>
			</view>
			<view class="header-right">
				<view class="header-actions"> -->
		<!-- <text class="action-icon" @click="toggleBookmark">🔖</text> -->
		<!-- 		<text class="action-icon" @click="showSettings">⚙️</text>
				</view>
			</view>
		</view> -->

		<!-- 阅读进度 -->
		<view class="reading-progress">
			<view class="progress-info">
				<text class="chapter-name">第{{ currentChapter }}章 {{ getCurrentChapterTitle() }}</text>
				<text class="progress-text">{{ readingProgress }}% <text class="action-icon" @click="showSettings">⚙️</text></text>

			</view>
			
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: readingProgress + '%' }"></view>

			</view>

		</view>

		<!-- 章节内容 -->
		<scroll-view class="content-scroll" scroll-y="true" @scroll="onContentScroll">
			<view class="chapter-content" :style="contentStyle">
				<text class="chapter-title">第{{ currentChapter }}章 {{ getCurrentChapterTitle() }}</text>
				<view class="content-text">
					<text v-for="(paragraph, index) in currentContent" :key="index" class="paragraph">
						{{ paragraph }}
					</text>
				</view>
			</view>
		</scroll-view>

		<!-- 阅读控制 -->
		<view class="reader-controls">
			<view class="control-group">
				<view class="control-btn" @click="prevChapter" :class="{ disabled: currentChapterIndex === 0 }">
					<text class="control-icon">◀</text>
					<text class="control-text">上一章</text>
				</view>

				<view class="chapter-selector">
					<text class="chapter-indicator">{{ currentChapter }}/{{ chapters.length }}</text>
				</view>

				<view class="control-btn" @click="nextChapter"
					:class="{ disabled: currentChapterIndex === chapters.length - 1 }">
					<text class="control-icon">▶</text>
					<text class="control-text">下一章</text>
				</view>
			</view>
		</view>

		<!-- 设置面板 -->
		<view class="settings-panel" v-if="showSettingsPanel">
			<view class="settings-header">
				<text class="settings-title">阅读设置</text>
				<text class="close-btn" @click="hideSettings">✕</text>
			</view>
			<view class="settings-content">
				<view class="setting-item">
					<text class="setting-label">字体大小</text>
					<view class="font-size-controls">
						<text class="size-btn" @click="decreaseFontSize">A-</text>
						<text class="size-value">{{ fontSize }}px</text>
						<text class="size-btn" @click="increaseFontSize">A+</text>
					</view>
				</view>
				<view class="setting-item">
					<text class="setting-label">行间距</text>
					<view class="line-height-controls">
						<text class="height-btn" @click="decreaseLineHeight">-</text>
						<text class="height-value">{{ lineHeight }}</text>
						<text class="height-btn" @click="increaseLineHeight">+</text>
					</view>
				</view>
				<view class="setting-item">
					<text class="setting-label">背景颜色</text>
					<view class="theme-buttons">
						<view v-for="theme in themes" :key="theme.name" class="theme-btn"
							:class="{ active: currentTheme === theme.name }"
							:style="{ backgroundColor: theme.background }" @click="changeTheme(theme.name)">
							<text class="theme-check" v-if="currentTheme === theme.name">✓</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentChapter: 1,
				currentChapterIndex: 0,
				readingProgress: 0,
				showSettingsPanel: false,
				fontSize: 16,
				lineHeight: 1.6,
				currentTheme: 'default',

				novelInfo: {
					title: '星辰大海',
					author: '星空作家',
					totalChapters: 10,
					description: '一部关于探索与成长的科幻小说'
				},

				chapters: [{
						id: 1,
						title: '初遇星空',
						content: [
							'夜幕降临，繁星点点。少年林枫站在山顶，仰望浩瀚的星空，心中充满了对未知世界的好奇。',
							'这是他第一次独自远行，离开熟悉的城市，来到这片偏远的山区。父母总是担心他的安全，但林枫坚信，只有走出舒适区，才能真正成长。',
							'山风轻拂，带着草木的清香。林枫打开背包，取出望远镜，开始观察星空。他知道，每一颗星星都是一个遥远的世界，蕴含着无限可能。',
							'突然，一道流星划过夜空，留下美丽的光痕。林枫许下心愿：希望有一天，能够亲自探索那些遥远的星球。',
							'这个夜晚，注定是不平凡的开始。',
							'第二天清晨，林枫在山间发现了一个奇怪的装置。它看起来像是某种通讯设备，但设计风格完全不同于地球上的任何科技。',
							'装置表面闪烁着微弱的光芒，似乎还在运行。林枫小心翼翼地靠近，发现屏幕上显示着一串奇怪的符号。',
							'作为一名天文爱好者，林枫对宇宙中的各种信号都有所了解。但这些符号对他来说完全是陌生的，似乎来自另一个文明。',
							'他决定记录下这些符号，带回学校请教教授。或许，这将是人类第一次接触外星文明的证据。',
							'就在他准备离开时，装置突然发出强烈的光芒，将整个山谷照亮……'
						]
					},
					{
						id: 2,
						title: '神秘信号',
						content: [
							'第二天清晨，林枫在山间发现了一个奇怪的装置。它看起来像是某种通讯设备，但设计风格完全不同于地球上的任何科技。',
							'装置表面闪烁着微弱的光芒，似乎还在运行。林枫小心翼翼地靠近，发现屏幕上显示着一串奇怪的符号。',
							'作为一名天文爱好者，林枫对宇宙中的各种信号都有所了解。但这些符号对他来说完全是陌生的，似乎来自另一个文明。',
							'他决定记录下这些符号，带回学校请教教授。或许，这将是人类第一次接触外星文明的证据。',
							'就在他准备离开时，装置突然发出强烈的光芒，将整个山谷照亮……'
						]
					},
					{
						id: 3,
						title: '星际之门',
						content: [
							'光芒消散后，林枫发现自己站在一个完全陌生的环境中。周围是奇异的植物和建筑，天空中有三个不同颜色的太阳。',
							'他意识到，那个装置可能是一个星际传送门，将他带到了另一个星球。虽然心中有些恐惧，但更多的是兴奋和好奇。',
							'远处走来几个身影，他们的外貌与人类相似，但皮肤呈淡蓝色，眼睛闪烁着智慧的光芒。林枫深吸一口气，准备迎接第一次外星接触。',
							'这将是人类历史上重要的一刻，也是林枫人生中最大的冒险。星际之门已经打开，新的旅程即将开始。',
							'在这个陌生的世界里，林枫将面临无数挑战，也将发现关于宇宙的惊人真相。'
						]
					}
				],

				themes: [{
						name: 'default',
						background: '#f5f5f5',
						text: '#333333'
					},
					{
						name: 'warm',
						background: '#f8f0e5',
						text: '#5c4b37'
					},
					{
						name: 'dark',
						background: '#2d3748',
						text: '#e2e8f0'
					},
					{
						name: 'green',
						background: '#f0fff4',
						text: '#2d7844'
					}
				]
			}
		},

		computed: {
			currentContent() {
				if (this.chapters[this.currentChapterIndex]) {
					return this.chapters[this.currentChapterIndex].content || [];
				}
				return [];
			},
			contentStyle() {
				return {
					fontSize: this.fontSize + 'px',
					lineHeight: this.lineHeight
				};
			}
		},

		onLoad(options) {
			if (options.chapter) {
				this.currentChapter = parseInt(options.chapter);
				this.currentChapterIndex = this.currentChapter - 1;
			}

			// 从缓存加载阅读设置
			this.loadReadingSettings();
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 获取当前章节标题
			getCurrentChapterTitle() {
				if (this.chapters[this.currentChapterIndex]) {
					return this.chapters[this.currentChapterIndex].title || '';
				}
				return '';
			},

			// 切换书签
			toggleBookmark() {
				uni.showToast({
					title: '已添加书签',
					icon: 'success'
				});
			},

			// 显示设置面板
			showSettings() {
				this.showSettingsPanel = true;
			},

			// 隐藏设置面板
			hideSettings() {
				this.showSettingsPanel = false;
				this.saveReadingSettings();
			},

			// 上一章
			prevChapter() {
				if (this.currentChapterIndex > 0) {
					this.currentChapterIndex--;
					this.currentChapter--;
					this.readingProgress = 0;
					this.scrollToTop();
				}
			},

			// 下一章
			nextChapter() {
				if (this.currentChapterIndex < this.chapters.length - 1) {
					this.currentChapterIndex++;
					this.currentChapter++;
					this.readingProgress = 0;
					this.scrollToTop();
				}
			},

			// 滚动到顶部
			scrollToTop() {
				// 在实际项目中，这里需要操作scroll-view组件滚动到顶部
				this.readingProgress = 0;
			},

			// 内容滚动事件
			onContentScroll(e) {
				// 简化处理：根据滚动位置计算阅读进度
				const scrollTop = e.detail.scrollTop;
				// 这里需要获取内容实际高度，简化处理为固定值
				const contentHeight = 2000; // 实际项目中需要动态计算
				this.readingProgress = Math.min(100, Math.round((scrollTop / contentHeight) * 100));
			},

			// 增大字体
			increaseFontSize() {
				if (this.fontSize < 24) {
					this.fontSize += 2;
				}
			},

			// 减小字体
			decreaseFontSize() {
				if (this.fontSize > 12) {
					this.fontSize -= 2;
				}
			},

			// 增大行间距
			increaseLineHeight() {
				if (this.lineHeight < 2.5) {
					this.lineHeight += 0.1;
				}
			},

			// 减小行间距
			decreaseLineHeight() {
				if (this.lineHeight > 1.2) {
					this.lineHeight -= 0.1;
				}
			},

			// 切换主题
			changeTheme(themeName) {
				this.currentTheme = themeName;
			},

			// 加载阅读设置
			loadReadingSettings() {
				try {
					const settings = uni.getStorageSync('readingSettings');
					if (settings) {
						this.fontSize = settings.fontSize || 16;
						this.lineHeight = settings.lineHeight || 1.6;
						this.currentTheme = settings.theme || 'default';
					}
				} catch (e) {
					console.log('加载设置失败', e);
				}
			},

			// 保存阅读设置
			saveReadingSettings() {
				try {
					uni.setStorageSync('readingSettings', {
						fontSize: this.fontSize,
						lineHeight: this.lineHeight,
						theme: this.currentTheme
					});
				} catch (e) {
					console.log('保存设置失败', e);
				}
			},

			// 保存阅读进度
			saveReadingProgress() {
				try {
					uni.setStorageSync('readingProgress', {
						novel: this.novelInfo.title,
						chapter: this.currentChapter,
						progress: this.readingProgress
					});
				} catch (e) {
					console.log('保存进度失败', e);
				}
			}
		},

		onUnload() {
			// 离开页面时保存阅读进度
			this.saveReadingProgress();
		}
	}
</script>

<style lang="scss" scoped>
	.novel-container {
		background: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		transition: all 0.3s ease;
	}

	.reader-header {
		background: white;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #e8e8e8;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.header-left,
	.header-right {
		width: 200rpx;
	}

	.back-btn {
		display: flex;
		align-items: center;
		color: #1890ff;
		font-size: 28rpx;
	}

	.back-icon {
		font-size: 36rpx;
		margin-right: 10rpx;
	}

	.header-center {
		flex: 1;
		text-align: center;
	}

	.novel-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.header-actions {
		display: flex;
		justify-content: flex-end;
		gap: 30rpx;
	}

	.action-icon {
		font-size: 36rpx;
		color: #666;
	}

	.reading-progress {
		background: white;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.progress-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.chapter-name {
		font-size: 28rpx;
		color: #666;
	}

	.progress-text {
		font-size: 24rpx;
		color: #1890ff;
		font-weight: 500;
	}

	.progress-bar {
		height: 6rpx;
		background: #f0f0f0;
		border-radius: 3rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: #1890ff;
		border-radius: 3rpx;
		transition: width 0.3s ease;
	}

	.content-scroll {
		flex: 1;
		background: white;
	}

	.chapter-content {
		padding: 40rpx 30rpx;
		min-height: 100%;
		transition: all 0.3s ease;
	}

	.chapter-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		margin-bottom: 50rpx;
		display: block;
	}

	.content-text {
		color: #333;
		transition: all 0.3s ease;
	}

	.paragraph {
		display: block;
		margin-bottom: 40rpx;
		text-indent: 2em;
		text-align: justify;
	}

	.reader-controls {
		background: white;
		padding: 30rpx;
		border-top: 1rpx solid #e8e8e8;
	}

	.control-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.control-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
		background: #f8f9fa;
		min-width: 150rpx;
	}

	.control-btn.disabled {
		opacity: 0.5;
	}

	.control-icon {
		font-size: 32rpx;
		color: #1890ff;
		margin-bottom: 10rpx;
	}

	.control-text {
		font-size: 24rpx;
		color: #666;
	}

	.chapter-selector {
		display: flex;
		align-items: center;
	}

	.chapter-indicator {
		font-size: 28rpx;
		color: #999;
		background: #f8f9fa;
		padding: 15rpx 25rpx;
		border-radius: 20rpx;
	}

	.settings-panel {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}

	.settings-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.settings-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.close-btn {
		font-size: 36rpx;
		color: #999;
	}

	.settings-content {
		padding: 30rpx;
	}

	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.setting-label {
		font-size: 28rpx;
		color: #666;
	}

	.font-size-controls,
	.line-height-controls {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.size-btn,
	.height-btn {
		width: 80rpx;
		height: 80rpx;
		background: #f0f0f0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 600;
	}

	.size-value,
	.height-value {
		font-size: 28rpx;
		color: #333;
		min-width: 100rpx;
		text-align: center;
	}

	.theme-buttons {
		display: flex;
		gap: 20rpx;
	}

	.theme-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		border: 2rpx solid #e8e8e8;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.theme-btn.active {
		border-color: #1890ff;
	}

	.theme-check {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}

	/* 主题样式 */
	.novel-container.theme-warm {
		background: #f8f0e5;
	}

	.novel-container.theme-warm .content-text {
		color: #5c4b37;
	}

	.novel-container.theme-dark {
		background: #2d3748;
	}

	.novel-container.theme-dark .content-text {
		color: #e2e8f0;
	}

	.novel-container.theme-dark .reader-header,
	.novel-container.theme-dark .reading-progress,
	.novel-container.theme-dark .content-scroll,
	.novel-container.theme-dark .reader-controls {
		background: #2d3748;
		color: #e2e8f0;
	}

	.novel-container.theme-green {
		background: #f0fff4;
	}

	.novel-container.theme-green .content-text {
		color: #2d7844;
	}

	// /* 响应式设计 */
	// @media (max-width: 750px) {
	//   .reader-header {
	//     padding: 20rpx;
	//   }

	//   .chapter-content {
	//     padding: 30rpx 20rpx;
	//   }

	//   .control-group {
	//     flex-wrap: wrap;
	//     gap: 20rpx;
	//   }

	//   .control-btn {
	//     min-width: 120rpx;
	//     padding: 15rpx 20rpx;
	//   }
	// }
</style>